import React, { PureComponent } from "react";
import './withRightNav.css';
//高阶组件
function withRightNav(WrapComponent) {
    return class extends PureComponent {
        constructor() {
            super();
            this.service = React.createRef();
            this.share = React.createRef();
            this.backTop = React.createRef();
            this.home = React.createRef();
            this.cart = React.createRef();
            this.nav = React.createRef();
            this.state = {
                f: false
            }
        }
        componentDidMount() {
            setTimeout(() => {
                this.navClick();
            }, 1000)
        }
        goHome = () => {
            this.props.history.push('/');
        }
        goCart = () => {
            this.props.history.push('/cart');
        }
        goTop = () => {
            document.documentElement.scrollTop = 0;
        }
        render() {
            const { f } = this.state;
            // const { pathname } = this.props.location;
            return <>
                <WrapComponent {...this.props}></WrapComponent>
                <div className="box">
                    <div className={f ? 'nav' : 'nav1'} onClick={this.navClick} ref={this.nav}></div>
                    <div className={f ? "backTop" : "backTop1"} ref={this.backTop} onClick={this.goTop}></div>
                    <div className={f ? "home" : "home1"} ref={this.home} onClick={this.goHome}></div>
                    <div className={f ? "cart" : "cart1"} ref={this.cart} onClick={this.goCart}></div>
                    {/* <div className="share" ref={this.service}></div> */}
                    <div className={f ? "share" : "share1"} ref={this.share}></div>
                </div>
            </>
        }
        navClick = () => {
            var f = this.state.f;
            // var o = ev.target;
            if (f) {
                // o.className = "ac nav1";
                this.nav.current.className = "ac nav1";
                this.backTop.current.className = "ac backTop1";
                this.home.current.className = "ac home1";
                this.share.current.className = "ac share1";
                this.cart.current.className = "ac cart1";
                // this.service.current.className = "ac service1";
            }
            else {
                // o.className = "ac nav";
                this.nav.current.className = "ac nav";
                this.backTop.current.className = "ac backTop";
                this.home.current.className = "ac home";
                this.share.current.className = "ac share";
                this.cart.current.className = "ac cart";
                // this.service.current.className = "ac service";
            }
            this.setState({
                f: !f
            })
        }
    }
}
export default withRightNav;